// 获取课程名字及成绩的输入
let subjectIn = document.querySelector('#subjectIn');
let scoreIn = document.querySelector('#scoreIn');
// 获取新增按钮的元素对象
let addBtn = document.querySelector('#add');
// 获取表格体元素对象
let tbody = document.querySelector('tbody');
// 获取总得分区域列单元格
let totalScore = document.querySelector('tfoot td:last-child');
// 获取重置数据的按钮
let resetBtn = document.querySelector('#reset');

// 给新增按钮绑定事件
/*
JS中的事件指的是 当我们通过鼠标、键盘等工具操作页面元素时，产生的行为影响我们称之为事件；
如 鼠标单击/双击按钮、光标悬浮于某一个区域、键盘输入、光标聚焦、失去焦点；
当某一个行为需要给其设定 操作时，我们称之为绑定事件
*/
addBtn.onclick = function () {
    // 在本方法内编写的代码就是当该按钮被单击时需要执行的代码
    // alert("课程名：" + subjectIn.value + "，课程成绩：" + scoreIn.value)
    // 通过元素对象直接.的内容都是该元素标签内部的属性，在这里获取的就是input标签内的value属性
    let subject = subjectIn.value;
    let score = scoreIn.value;

    /*// 在tbody下创建tr元素表示行，td元素表示列
    let trEl = document.createElement('tr');
    let tdEl = document.createElement('td');
    let tdEl2 = document.createElement('td');
    // 给td元素分别绑定数据
    // innerText指的就是标签开始到结束中间的文本域区域，innerText就是以纯文本的形式编写字符串
    // innerHTML会对编写的内容进行HTML和css渲染
    tdEl.innerText = subject;
    tdEl2.innerHTML = '<span style="color: red">' + score + '</span>';
    // 将td节点挂载到tr节点下，然后将tr节点挂载到tbody元素节点下
    trEl.append(tdEl, tdEl2);
    tbody.append(trEl);*/

    // 添加元素的方式2
    // ${xxx} 表示占位符，将来可以使用xxx变量对应的值替代
    let str = `<tr><td>${subject}</td><td>${score}</td></tr>`;
    // 使用 innerHTML 解析
    let tempDiv = document.createElement('div');
    tempDiv.innerHTML = str;
    let trNode = tempDiv.firstChild;

    // 添加到表格
    tbody.appendChild(trNode);

    // 清空输入框
    subjectIn.value = '';
    scoreIn.value = '';

    // 计算总得分
    totalScore.innerText = Number.parseInt(totalScore.innerText) +
        Number.parseInt(score);
}

// 给重置数据的按钮绑定点击事件
resetBtn.onclick = function () {
    totalScore.innerText = 0;
    tbody.innerHTML = null;
}